<template>
  <el-submenu :index="menu.id" v-if="menu.children && menu.children.length" :key="menu.id">
    <template slot="title">
      <os-icon v-if="menu.icon || level === 1" :name="menu.icon || 'ring'" :size="iconSize"></os-icon>
      <span slot="title" class="m-l-5">{{menu.name}}</span>
    </template>
    <template v-for="subMenu in menu.children">
      <sub-menu :menu="subMenu" :key="subMenu.id" :level="level + 1"></sub-menu>
    </template>
  </el-submenu>
  <el-menu-item :index="menu.id" v-else :key="menu.id">
    <os-icon v-if="menu.icon || level === 1" :name="menu.icon || 'ring'" :size="iconSize"></os-icon>
    <span slot="title" class="m-l-5">{{menu.name}}</span>
  </el-menu-item>
</template>
<script>
export default {
  name: 'SubMenu',
  props: {
    menu: { required: true },
    level: { default: 1 }
  },
  computed: {
    iconSize () {
      return this.level === 1 ? 18 : 14
    }
  }
}
</script>
<style>
  .el-menu--collapse>.item>.el-menu-item span, .el-menu--collapse>.item>.el-submenu>.el-submenu__title span{
    visibility: hidden;
  }
  .el-menu--collapse>.item>.el-menu-item .el-submenu__icon-arrow, .el-menu--collapse>.item>.el-submenu>.el-submenu__title .el-submenu__icon-arrow{
    display: none;
  }
</style>
